<template>

  <div>
    <div v-if="record.imageUrlArray.length === 0">
      <span>暂无图片</span>
    </div>
    <div v-else class="mt-[20px] grid justify-start items-stretch gap-[10px]" style="grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));">
      <div
        v-for="(item, index) in record.imageUrlArray"
        :key="index"
        class="size-[180px]"
      >
        <img
          v-if="item.image_url"
          :src="item.image_url"
          alt=""
          class="rounded-full max-w-full h-auto"
        />
        <video
          v-if="item.video_url"
          :poster="item.videoPoster"
          class="rounded-full max-w-full h-auto"
          :src="item.video_url"
          controls
        ></video>
        <!--              <div class="rounded-full size-[180px] overflow-hidden">-->
        <!--                <img   :src="item.imgUrl" alt=""/>-->
        <!--              </div>-->
      </div>
    </div>
  </div>


</template>

<script >
import {watch} from "vue";

export default {
  name: "showImage",
  props: {
    record: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  setup(props, {emit}) {
    watch(()=>props.record,()=>{
      console.log('record',props.record)
    })
    return {
    }
  }
}
</script>

<style scoped>

</style>
